<template>
  <div class="aaa" id="aaa"><main-view /></div>

  <div class="header" id="abc">
    <div class="tou1"><router-link to="/homePage" class="jm" id="1">主页</router-link></div>
    <div class="tou2"><router-link to="/historicalData" class="jm" id="2">历史数据</router-link></div>
    <div class="tou3"><router-link to="/warningInformation" class="jm" id="3">预警信息</router-link></div>
    <div class="tou4"><span class="hlog">雨污水管网智能监测云平台</span></div>
    <div class="tou5"><router-link to="/reportManagement" class="jm" id="4">报告管理</router-link></div>
    <div class="tou6"><router-link to="/IoTPlatform" class="jm" id="5">物联网平台</router-link></div>
    <div class="tou7"><router-link to="/projectManagement" class="jm" id="6">项目管理</router-link></div>
  </div>
  <Suspense>
    <router-view></router-view>
  </Suspense>
</template>

<script setup lang="ts">
import MainView from "@mars/components/mars-work/main-view.vue"

</script>
<style scoped>
.aaa {
  height: 90vh;
}

.header {
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 100;
  top: 0;
  width: 100vw;
  height: 8.5vh;
  color: #0EFCFF;
  background-color: #0EFCFF;
  background: url(/img/jiemian/top.png);
  opacity: 0.7;
  background-repeat: no-repeat;
  background-size: cover;
}

.tou1 {
  text-align: right;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.tou2 {
  text-align: center;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.tou3 {
  text-align: left;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.tou4 {
  margin-top: 1vh;
  width: 28vw;
  height: 7.5vh;
  text-align: center;
}

.tou5 {
  text-align: right;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.tou6 {
  text-align: center;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.tou7 {
  text-align: left;
  margin-top: 2.5vh;
  width: 12vw;
  height: 7vh;
}

.hlog {
  font-size: 1.38vw;
}

.jm {
  padding: 0.1vh 0.8vw;
  background-color: transparent;
  font-size: 1vw;
  color: #0dedf1;
}


#aaa {
  width: 100vw;
  height: 100vh;
}

select {
  width: 9.89vw;
  height: 4.02vh;
  font-size: 0.8vw;
}

input {
  width: 9.89vw;
  height: 4.02vh;
  font-size: 0.8vw;
}

.router-link-active {
  background-color: darkslategray;
  border-color: #0efcff;
  box-shadow: 1px 1px 3px 1px #0efcff inset;

}
</style>
